<template>
  <div id="act-sequence-group" class="act-group">
    <ComplexTimeRange
      v-bind:index="index"
      v-bind:value="rule.time"
      v-bind:show-remove-button="true"
      @removeItem="removeGroup"
      style="margin-bottom: 5px;">
    </ComplexTimeRange>
    <a-button v-if="rule.actions.length < 1" v-on:click="addItem">添加事件</a-button>
    <ActionSequenceStep
      class="act-sequence"
      v-for="(item, eventIndex) in rule.actions"
      v-bind:stepIndex="index"
      v-bind:key="eventIndex"
      v-bind:index="eventIndex"
      v-bind:step="item"
      v-bind:properties="properties"
      v-bind:events="events"
      v-bind:datasourceId="datasourceId"
      v-on:add="addItem"
      v-on:remove="removeItem"
    >
    </ActionSequenceStep>
  </div>
</template>

<script>
import ActionSequenceStep from "./ActionSequenceStep";
import ComplexTimeRange from "./ComplexTimeRange";
export default {
  name: "ActionSequence",
  components: {ActionSequenceStep,ComplexTimeRange},
  props: {
    index: Number,
    events: Array,
    rule: Object,
    properties: Array,
    datasourceId: Number
  },
  computed:{},
  methods: {
    removeGroup(index) {
      this.$emit("removeGroup",index)
    },
    addItem () {
      if (this.rule.actions.length < 9){
        this.rule.actions.push({
          name: (this.rule.actions.length + 1),
          event: '',
          filter: {
            condition: 'AND',
            rules: []
          }
        });
      }else {
        this.$Message.error('一个行为序列中事件数不能大于9');
      }
    },
    removeItem (index) {
      this.rule.actions.splice(index, 1);
      this.rule.actions.forEach((item,i)=> {
        item.name = (i + 1)
      })
    }
  },
  watch:{
    index (){
      this.rule.id = String.fromCharCode(65 + this.index)
    }
  },
  mounted() {
    this.rule.id = String.fromCharCode(65 + this.index)
  },

}
</script>

<style scoped>
.act-group{
  margin: 0px 0px 10px 0px;
  background: rgb(255,255,255);
  padding: 5px;
  border: 1px solid  #54ba52;
}

.act-group .act-id{
  border: 1px solid rgb(200, 200, 200);
  background-color: rgb(245, 245, 245);
  border-radius: 3px;
}
</style>
